// 冬冬写给小羊的专属留言 💕
const messages = [
    "小羊，记得多喝水哦~",
    "小羊今天也要开心呀~",
    "小羊要好好吃饭呀",
    "小羊要记得按时吃饭哦",
    "小羊要保持微笑呀~",
    "小羊要多喝热水呀",
    "小羊要开心每一天",
    "小羊是最可爱的女孩子",
    "小羊要注意保暖哦",
    "小羊要记得护肤呀",
    "小羊笑起来最好看了",
    "小羊要早点睡觉觉",
    "小羊是冬冬的小太阳",
    "小羊要健健康康的",
    "小羊，冬冬想你了~",
    "小羊，冬冬会一直保护你",
    "小羊，你是冬冬的全世界",
    "小羊，冬冬永远爱你",
    "小羊别熬夜啦，早点休息",
    "小羊，记得想冬冬哦",
    "小羊，你笑起来真好看",
    "小羊，冬冬会永远陪着你",
    "小羊，累了就休息一下",
    "小羊，天冷了记得加衣服",
    "小羊，你是最好的",
    "小羊，冬冬会好好照顾你",
    "小羊，你今天也很美",
    "小羊，冬冬的心里只有你",
    "小羊，谢谢你一直陪着冬冬",
    "小羊，和你在一起冬冬很幸福",
    "小羊，你是冬冬最珍贵的宝贝",
    "小羊，有你真好",
    "小羊，冬冬想每天都见到你",
    "小羊，你的笑容是冬冬的动力",
    "小羊，冬冬会努力让你幸福",
    "小羊，遇见你是冬冬最大的幸运",
    "小羊，冬冬会一直一直爱你",
    "小羊，你要相信冬冬哦",
    "小羊，不开心了就告诉冬冬",
    "小羊，冬冬永远站在你这边",
    "小羊，你值得世界上最好的",
    "小羊，记得按时吃早餐",
    "小羊，别太累了哦",
    "小羊，冬冬会陪你度过每一天",
    "小羊，你是冬冬的小公主",
    "小羊，冬冬想给你全世界的温柔",
    "小羊，今天的你也超级可爱",
    "小羊，冬冬好喜欢你呀",
    "小羊，你的一切冬冬都喜欢",
    "小羊，冬冬会守护你的梦想",
    "小羊，未来冬冬和你一起走",
    "小羊，有冬冬在别害怕",
    "小羊，你开心冬冬就开心",
    "小羊，冬冬想一直陪在你身边",
    "小羊，你是冬冬的小幸运",
    "小羊，记得吃水果哦",
    "小羊，晚安，做个好梦",
    "小羊，早安，新的一天加油",
    "小羊，想你了，超级想",
    "小羊，你今天吃饭了吗",
    "小羊，天气变化记得注意身体",
    "小羊，冬冬会一辈子对你好",
    "小羊，你就是冬冬的唯一",
    "小羊，看到你冬冬就很开心",
    "小羊，冬冬爱你爱到月亮上",
    "小羊，你是冬冬心里最软的那部分",
    "小羊，余生都是你",
    "小羊，冬冬和你要一直一直在一起",
    "小羊，你的冬冬永远爱你",
    "小羊，冬冬会用一生来疼爱你",
    // "小羊，下辈子冬冬还要和你在一起"
];

// 卡片颜色类型
const cardColors = ['card-pink', 'card-blue', 'card-yellow', 'card-purple', 'card-green', 'card-peach'];

// 存储当前显示的卡片
let activeCards = [];
const maxCards = 500; // 屏幕上最多显示的卡片数量

// 获取随机消息
function getRandomMessage() {
    return messages[Math.floor(Math.random() * messages.length)];
}

// 获取随机颜色
function getRandomColor() {
    return cardColors[Math.floor(Math.random() * cardColors.length)];
}

// 生成随机位置（确保不会完全重叠）
function getRandomPosition() {
    const container = document.getElementById('notifications-container');
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;
    
    // 留出边距，防止卡片溢出屏幕
    const margin = 50;
    const cardWidth = 280;
    const cardHeight = 100;
    
    const left = Math.random() * (containerWidth - cardWidth - margin * 2) + margin;
    const top = Math.random() * (containerHeight - cardHeight - margin * 2) + margin;
    
    return { left, top };
}

// 创建通知卡片
function createNotificationCard() {
    // 如果卡片数量超过最大值，移除最早的卡片
    if (activeCards.length >= maxCards) {
        const oldestCard = activeCards.shift();
        removeCard(oldestCard);
    }
    
    const container = document.getElementById('notifications-container');
    const card = document.createElement('div');
    const position = getRandomPosition();
    
    card.className = `notification-card ${getRandomColor()}`;
    card.style.left = `${position.left}px`;
    card.style.top = `${position.top}px`;
    
    card.innerHTML = `
        <div class="notification-header">
            <span class="notification-icon">❤️</span>
            <span>提示</span>
        </div>
        <div class="notification-content">${getRandomMessage()}</div>
    `;
    
    // 点击卡片移除
    card.addEventListener('click', () => {
        removeCard(card);
        const index = activeCards.indexOf(card);
        if (index > -1) {
            activeCards.splice(index, 1);
        }
    });
    
    container.appendChild(card);
    activeCards.push(card);
}

// 移除卡片
function removeCard(card) {
    card.classList.add('removing');
    setTimeout(() => {
        if (card.parentNode) {
            card.parentNode.removeChild(card);
        }
    }, 300);
}

// 自动生成卡片
function startGeneratingCards() {
    // 初始生成一些卡片
    for (let i = 0; i < 20; i++) {
        setTimeout(() => {
            createNotificationCard();
        }, i * 150);
    }
    
    // 持续生成新卡片 - 保持快速弹出
    setInterval(() => {
        createNotificationCard();
    }, 200); // 每0.2秒生成一张新卡片，持续保持快速！
}

// 页面加载完成后开始
window.addEventListener('load', () => {
    startGeneratingCards();
});

// 响应式调整
window.addEventListener('resize', () => {
    // 窗口大小改变时，调整卡片位置避免溢出
    activeCards.forEach(card => {
        const rect = card.getBoundingClientRect();
        const container = document.getElementById('notifications-container');
        const containerRect = container.getBoundingClientRect();
        
        if (rect.right > containerRect.right) {
            card.style.left = `${containerRect.width - rect.width - 20}px`;
        }
        if (rect.bottom > containerRect.bottom) {
            card.style.top = `${containerRect.height - rect.height - 20}px`;
        }
    });
});

